<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="base/resource"/>
    <title>实时监控 - Big Whale</title>
    <link href="../libs/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet"/>
</head>
<body ng-app="content-app" ng-controller="content-controller">
<div class="modal fade" id="editDlg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">{{editItem.id ? "编辑" : "新增"}}</h4>
            </div>
            <form class="form-horizontal" ng-submit="onSaveItem()">
                <div class="modal-body">
                    <div class="form-group" th:if="${session.user.root}">
                        <label for="modal_select_uid" class="col-sm-3 control-label">
                            用户&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-4">
                            <select id="modal_select_uid" class="form-control selectpicker show-tick" data-live-search="true"
                                    ng-model="editItem.uid" ng-options="item.id as item.username for item in userList" required>
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_type" class="col-sm-3 control-label">
                            类型
                        </label>
                        <div class="col-sm-4">
                            <select id="modal_select_type" class="form-control selectpicker show-tick"
                                    ng-model="editItem.type" ng-options="item.value as item.name for item in monitorTypeList" required>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_scriptId" class="col-sm-3 control-label">
                            脚本&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-4">
                            <select id="modal_select_scriptId" class="form-control selectpicker show-tick" data-live-search="true"
                                    ng-model="editItem.scriptId" ng-options="item.id as item.name for item in scriptList | scriptFilter :editItem.type :editItem.uid" required>
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_exAutoRestart" class="col-sm-3 control-label">
                            异常重启
                        </label>
                        <div class="col-sm-4">
                            <select id="modal_select_exAutoRestart" class="form-control selectpicker show-tick"
                                    ng-model="editItem.exAutoRestart" ng-options="item.value as item.name for item in booleanTypeList" required>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_input_waitingBatches_2" class="col-sm-3 control-label" ng-if="editItem.type == 0">
                            批次积压告警阈值&nbsp;<B>*</B>
                        </label>
                        <label for="modal_input_waitingBatches_3" class="col-sm-3 control-label" ng-if="editItem.type == 1">
                            任务阻塞告警阈值(%)&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-4">
                            <input id="modal_input_waitingBatches_2" class="form-control" type="number" ng-model="editItem.waitingBatches" min="0" required ng-if="editItem.type == 0">
                            <input id="modal_input_waitingBatches_3" class="form-control" type="number" ng-model="editItem.waitingBatches" min="0" max="100" required ng-if="editItem.type == 1">
                        </div>
                        <div class="col-sm-5">
                            <p class="help-block" ng-if="editItem.type == 0">批次积压大于等于该值的时候将进行告警，为0禁用</p>
                            <p class="help-block" ng-if="editItem.type == 1">单位时间内，任务阻塞比(阻塞任务数 / 消费任务数)大于等于该值的时候将进行告警，为0禁用，最大100</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_autoRestart" class="col-sm-3 control-label" ng-if="editItem.type == 0">
                            批次积压重启
                        </label>
                        <label for="modal_select_autoRestart" class="col-sm-3 control-label" ng-if="editItem.type == 1">
                            任务阻塞重启
                        </label>
                        <div class="col-sm-4">
                            <select id="modal_select_autoRestart" class="form-control selectpicker show-tick"
                                    ng-model="editItem.autoRestart" ng-options="item.value as item.name for item in booleanTypeList" required>
                            </select>
                        </div>
                        <div class="col-sm-5">
                            <p class="help-block" ng-if="editItem.type == 0">批次积压达到阈值后，自动进行任务重启</p>
                            <p class="help-block" ng-if="editItem.type == 1">任务阻塞达到阈值后，自动进行任务重启</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_input_cron" class="col-sm-3 control-label">
                            监控频率(cron表达式)&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-4">
                            <input id="modal_input_cron" class="form-control" ng-model="editItem.cron" required>
                        </div>
                        <div class="col-sm-5">
                            <p class="help-block">0 */1 * * * ? 为每1分钟检查一次</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_sendMail" class="col-sm-3 control-label">
                            发送邮件
                        </label>
                        <div class="col-sm-4">
                            <select id="modal_select_sendMail" class="form-control selectpicker show-tick"
                                    ng-model="editItem.sendMail" ng-options="item.value as item.name for item in booleanTypeList" required>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">
                            钉钉通知
                        </label>
                        <div class="col-sm-4">
                            <div ng-repeat="tip in editItem.dingdingHooks track by $index">
                                <input style="width: 95%; display: inline-block" type="text" class="form-control" ng-model="editItem.dingdingHooks[$index]" placeholder="钉钉token"><span style="width: 5%" class="glyphicon glyphicon-minus" ng-click="onRemoveTip(editItem.dingdingHooks, $index)"></span>
                            </div>
                            <div ng-click="!editItem.dingdingHooks ? editItem.dingdingHooks = []: '';onAddTip(editItem.dingdingHooks);">
                                <span style="padding-top: 7px;" class="glyphicon glyphicon-plus"></span>
                            </div>
                        </div>
                        <div class="col-sm-5">
                            <p class="help-block">需要指定@用户，可用“&”拼接，如：token&@phone1@phone2</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_status" class="col-sm-3 control-label">状态</label>
                        <div class="col-sm-4">
                            <select id="modal_select_status" class="form-control selectpicker show-tick"
                                    ng-model="editItem.status" ng-options="item.value as item.name for item in enableTypeList" required>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" id="btn_submit">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container-fluid animated fadeInDown">
    <div class="bw-nav">
        <div class="row">
            <ol class="breadcrumb">
                <li class="active">实时监控</li>
            </ol>
            <a class="bw-refresh" onclick="location.reload()" title="刷新">
                <i class="fa fa-refresh" style="font-size: 18px"></i>
            </a>
        </div>
    </div>
    <div class="bw-body">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-12 search-form">
                    <form class="form-inline" ng-submit="options.mypage.toFirst()">
                        <div class="form-group" th:if="${session.user.root}">
                            <label for="query_select_uid">用户</label>
                            <select id="query_select_uid" class="selectpicker show-tick" data-live-search="true"
                                    ng-model="options.query.uid" ng-options="item.id as item.username for item in userList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="query_select_type">类型</label>
                            <select id="query_select_type" class="selectpicker show-tick"
                                       ng-model="options.query.type" ng-options="item.value as item.name for item in monitorTypeList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="query_select_scriptId">脚本</label>
                            <select id="query_select_scriptId" class="selectpicker show-tick" data-live-search="true"
                                    ng-model="options.query.scriptId" ng-options="item.id as item.name for item in scriptList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">搜索</button>
                            <button type="button" class="btn btn-primary" ng-click="onNewItem()">新增</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>
                                        操作
                                    </th>
                                    <th th:if="${session.user.root}">
                                        用户
                                    </th>
                                    <th class="order" ng-click="sort('type', asc)">
                                        <div>类型</div>
                                        <div>
                                            <i class="glyphicon glyphicon-triangle-top" ng-class="(title === 'type' && asc === true) ? 'active' : ''"></i>
                                            <i class="glyphicon glyphicon-triangle-bottom" ng-class="(title === 'type' && asc === false) ? 'active' : ''"></i>
                                        </div>
                                    </th>
                                    <th>
                                        脚本名称
                                    </th>
                                    <th>
                                        监控频率(cron表达式)
                                    </th>
                                    <th>
                                        状态
                                    </th>
                                    <th class="order" ng-click="sort('executeTime', asc)">
                                        <div>上一次检查</div>
                                        <div>
                                            <i class="glyphicon glyphicon-triangle-top" ng-class="(title === 'executeTime' && asc === true) ? 'active' : ''"></i>
                                            <i class="glyphicon glyphicon-triangle-bottom" ng-class="(title === 'executeTime' && asc === false) ? 'active' : ''"></i>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in options.items | orderBy : title : !asc">
                                    <td>
                                        <p class="operate">
                                            <span ng-click="onEditItem(item)">
                                                <i class="glyphicon glyphicon-pencil" aria-hidden="true" title="编辑"></i>
                                            </span><br/>
                                            <span ng-click="onOpenLog(item)">
                                                <i class="glyphicon glyphicon-time" aria-hidden="true" title="日志"></i>
                                            </span><br/>
                                            <span class="remove" id="{{item.id}}_removeBtn" ng-click="onRemoveItem(item)">
                                                <i class="glyphicon glyphicon-trash" aria-hidden="true" title="删除"></i>
                                            </span>
                                        </p>
                                    </td>
                                    <td th:if="${session.user.root}">
                                        {{userMap[item.uid].username}}
                                    </td>
                                    <td>
                                        {{monitorTypeMap[item.type].name}}
                                    </td>
                                    <td>
                                        {{scriptMap[item.scriptId].name}}
                                    </td>
                                    <td>
                                        <span class="badge">{{item.cron}}</span>
                                    </td>
                                    <td>
                                        <label ng-if="enableTypeMap[item.status]" class="label label-{{enableTypeMap[item.status].style}}">
                                            {{enableTypeMap[item.status].name}}
                                        </label>
                                    </td>
                                    <td>
                                        {{item.executeTime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <mypage ng-model="options"></mypage>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<script src="../libs/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../libs/bootstrap-select/i18n/defaults-zh_CN.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/angular.min.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/myangular.js" type="text/javascript"></script>
<script src="../js/common.js" type="text/javascript"></script>
<script th:inline="javascript">
    var user = [[${session.user}]];
    var app = angular.module('content-app', []);
    registerPage(app);
    registerAuth(app);
    app.controller('content-controller', function ($scope, $http, $timeout) {
        getScript($scope, $http, true, false);
        if (user.root) {
            getAuthUser($scope, $http);
        }
        appendMonitorType($scope);
        appendEnableType($scope);
        appendBooleanType($scope);
        registerSort($scope);

        //新增
        $scope.onNewItem = function () {
            $scope.editItem = {
                type: 0,
                sendMail: true,
                status: 1,
                autoRestart: false,
                exAutoRestart: true,
                waitingBatches: 15,
                cron: '0 */1 * * * ?'
            };
            $('#editDlg').modal({backdrop: 'static', keyboard: false});
        };

        //编辑
        $scope.onEditItem = function (item) {
            $scope.editItem = angular.copy(item);
            $('#editDlg').modal({backdrop: 'static', keyboard: false});
        };

        $('#editDlg').on('shown.bs.modal', function () {
            $('.selectpicker').selectpicker('refresh');
        });

        //添加通知
        $scope.onAddTip = function(tips) {
            if (!tips) {
                tips = [];
            }
            tips.push('');
        };

        //移除通知
        $scope.onRemoveTip = function(tips,index) {
            if (!tips) {
                return;
            }
            tips.splice(index,1);
        };

        //保存
        $scope.onSaveItem = function() {
            $('#btn_submit').attr('disabled','true');
            $http.post('./save.api', $scope.editItem)
                .success(function(data) {
                    $('#editDlg').modal('hide');
                    if (data.code === 0) {
                        swal('操作成功', data.msg, 'success');
                        $scope.reload();
                    } else {
                        swal('操作失败', data.msg, 'error');
                    }
                    $('#btn_submit').removeAttr('disabled');
                });
        };

        //执行日志
        $scope.onOpenLog = function (item) {
            if (parent.xadmin) {
                parent.xadmin.open('实时监控 - 执行日志', 'script/cmd_record/list.html?monitorId=' + item.id);
            } else {
                window.open('../script/cmd_record/list.html?monitorId=' + item.id);
            }
        };

        //删除
        $scope.onRemoveItem = function (item) {
            removeItem('./delete.api', item, $http, $scope.reload);
        };

        // 获取数据列表
        $scope.options = {
            query: {},
            listUrl: './getpage.api'
        };

        //刷新
        $scope.reload = function () {
            $scope.options.mypage.reload();
        };

        $timeout(function () {
            $('.selectpicker').selectpicker('refresh');
        }, 3000);

    });

    app.filter('scriptFilter', function () {
        return function (scripts, type, uid) {
            if (type === 0) {
                if (uid) {
                    scripts = scripts.filter(function (script) {
                        return script.type === 1 && script.uid === uid;
                    });
                } else {
                    scripts = scripts.filter(function (script) {
                        return script.type === 1;
                    });
                }
            } else if (type === 1) {
                if (uid) {
                    scripts = scripts.filter(function (script) {
                        return script.type === 3 && script.uid === uid;
                    });
                } else {
                    scripts = scripts.filter(function (script) {
                        return script.type === 3;
                    });
                }
            }
            setTimeout(function () {
                $('.selectpicker').selectpicker('refresh');
            }, 100);
            return scripts;
        }
    });
</script>
</body>
</html>